<template>
	<transition
		enter-active-class="transition duration-100 ease-out"
		enter-from-class="opacity-0 transform scale-95"
		enter-to-class="opacity-100 transform scale-100"
		leave-active-class="transition duration-75 ease-in"
		leave-from-class="opacity-100 transform scale-100"
		leave-to-class="opacity-0 transform scale-95"
	>
		<div
			v-show="isShow"
			class="fixed z-[2190] min-w-[150px] rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
			:style="`top: ${y}px; left: ${x}px;`"
			role="menu"
			aria-orientation="vertical"
			aria-labelledby="menu-button"
			tabindex="-1"
		>
			<ul class="py-1" role="none">
				<li
					v-for="item in menuItems"
					:key="item.text"
					class="block flex items-center px-4 py-2 text-sm text-gray-700 cursor-pointer hover:bg-gray-100 hover:text-gray-900"
					role="menuitem"
					tabindex="-1"
					@click="handleItemClick(item)"
				>
					<el-icon class="mr-3 w-5 h-5 text-gray-400 group-hover:text-gray-500"><component :is="item.icon" /></el-icon>
					<span>{{ item.text }}</span>
				</li>
			</ul>
			<!-- Popper arrow is generally not used with this kind of modern menu, but if needed, it would require custom styling or a different approach -->
		</div>
	</transition>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';

const props = defineProps({
	x: Number,
	y: Number,
	menuItems: Array,
});

const emit = defineEmits(['itemClick', 'close']);

const isShow = ref(false);

const handleItemClick = (item) => {
	// console.log(props) // Keep props if they are used internally by the setup script, or for future use.
	emit('itemClick', item);
	isShow.value = false;
};

const show = () => {
	isShow.value = true;
};

const hide = () => {
	isShow.value = false;
};

defineExpose({ show, hide });
</script>

<style scoped>
/* Removed most styles as Tailwind is now handling them. */
/* You can add any very specific custom styles here if absolutely necessary. */
/* For example, if the popper arrow is strictly required, its styling would go here, */
/* but modern context menus often omit it for a cleaner look. */

/* Ensure el-icon is sized correctly if Tailwind classes aren't enough, though h-5 w-5 should cover it. */
.el-icon {
	/* Example: If specific alignment or size adjustments are needed beyond Tailwind's capabilities */
}
</style>
